<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>订单</title>
  <link rel="shortcut icon" href="./img/logo.jpg" />
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/miindex.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/cart.css">
  <link rel="stylesheet" href="./css/buy.css">
</head>
<style>
  header {
    width: 100%;
    display: flex;
    height: 72px;
    background-color: white;
    font-size: 16px;
    position: fixed;
    top: 0;
    border-bottom: 1px solid rgb(218, 218, 218);
    z-index: 10;
  }

  .header_left {
    width: 50%;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-right: 100px;
  }

  .header_left img {
    width: 40px;
    height: 40px;

  }


  .header_menu span {
    font-size: 25px;
    width: 40px;
    height: 40px;
  }

  .header_right {
    padding-right: 80px;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .header_right span {
    font-size: 22px;
  }

  .header_right input {
    width: 260px;
    height: 40px;
    text-indent: 0;
    /* height: 100%; */
    background-color: transparent;
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* border-style: none; */
    border: 1px solid gray;
    background-color: white;
  }


  .search {
    display: flex;
    justify-content: left;
    align-items: center;
    /* border-collapse: collapse; */
  }

  .header_right .search_a {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(218, 218, 218);
    border-left: 0;
  }
</style>

<body>
  <header>
    <div class="header_left">
      <a href="index.html"><img src="./img/logo.jpg" alt=""></a>
      <span class="women" style="font-size: 22px ;font-weight:600;margin-left: 0;">确认订单</span>

    </div>
    <div class="header_right">
      <div class="search">
        <input type="text" placeholder="搜索商品">
        <span class="iconfont search_a">&#xe651;</span>

      </div>
      <span class="iconfont">&#xe62f;</span>
      <span class="iconfont">&#xe638;</span>
      <span class="iconfont">&#xe6de;</span>
      <span class="iconfont">&#xe631;</span>

    </div>
  </header>
  <!-- 主体部分 -->
  <main>
    <p class="title">收货地址</p>
    <div class="addressDiv">
      <div class="addressInfo">
        <div class="name">王琦琦</div>
        <div class="tel">18303866666</div>
        <div class="location">湖北省武汉市江夏区光谷金融港</div>
        <div class="fix">修改</div>
        <div class="del">删除</div>
      </div>
      <div id="addAddress">
        <span class="add">+</span>
        <span class="hhh">添加新地址</span>
      </div>
    </div>

    <div  class="detail-section">
      <p  class="detail-header">商品及优惠券</p>
     <div class="detail">  
      <div class="goodsName">
        <img src="./img/手机5.webp" alt="" class="goodsImg">
        小米洗衣机</div>
      <div class="goodsPrice">2999.00元</div>

     </div>
     <div class="detail">  
      <div class="goodsName">
        <img src="./img/手机4.webp" alt="" class="goodsImg">
        小米洗衣机</div>
      <div class="goodsPrice">2999.00元</div>

     </div>
     
    </div>
    <div class="last">
<button class="cart">返回购物车</button>
    <button class="pay">去结算</button>
  </div>
  </main>

</body>
<script src="./js/buy.js"></script>
<script src="./js/common.js"></script>
<script src="./js/jQuery.js"></script>
<script src="./layui/layui.js"></script>

</html>